<style lang="scss" rel="stylesheet/scss">
    .j-choose-area {
        .van-cell__title {
            display: flex;
            .cell-title {
                flex: 0 0 80px;
            }
            .cell-value {
                flex:1;
            }
            .cell-btn {
                flex: 0 0 80px;
                text-align: right;
            }
        }
        .area-btn-group {
            display: flex;
            background: #f5f5f5;
            line-height: 2.5rem;
            padding: 0 1rem;
            p {
                flex:1;
                text-align: center;
                span {
                    border: 1px solid #999;
                    border-radius: 4px;
                    padding: 0.1rem 0.8rem;
                    &.active {
                        color: #4DCC01;
                        border: 1px solid #4DCC01;
                    }
                }
            }
        }
    }
</style>
<template>
    <div class="j-choose-area">
        <van-cell is-link @click="areaObj.popAreaShow=true">
            <template slot="title">
                <span class="cell-title">发布区域</span>
                <p class="font-normal-light font-normal-small cell-value">{{areaObj.selectTxt}}</p>
                <p class="cell-btn">切换区域</p>
            </template>
        </van-cell>
        <div class="area-btn-group">
            <p><span class="font-normal-small font-light" :class="{'active':selectFwType === 0}" @click="selectFw(0)">全国</span></p>
            <p><span class="font-normal-small font-light" :class="{'active':selectFwType === 1}" @click="selectFw(1)">全省</span></p>
            <p><span class="font-normal-small font-light" :class="{'active':selectFwType === 2}" @click="selectFw(2)">全市</span></p>
            <p><span class="font-normal-small font-light" :class="{'active':selectFwType === 3}" @click="selectFw(3)">全县/区</span></p>
        </div>
        <van-popup v-model="areaObj.popAreaShow" position="bottom">
            <van-area :area-list="areaList" @cancel="areaObj.popAreaShow=false" @confirm="selectArea"/>
        </van-popup>
    </div>
</template>

<script>
    import areaList from 'utils/area'
    import * as toolsUtils from 'utils/toolsUtils'
    export default {
        components: {

        },
        props:['hhh'],
        computed: {
            
        },
        data () {
            return {
                areaObj: {
                    popAreaShow: false,
                    selectTxt: '全国'
                },
                areaList:'',
                selectFwType: 0,
                selectArr: [],
                plugin: [{
                    pName: 'Geolocation',
                    events: {
                        init(o) {
                            // o 是高德地图定位插件实例
                            o.getCurrentPosition((status, result) => {
                                console.log(result)
                                debugger
                                if (result && result.position) {
                                    // result.addressComponent
                                    self.lng = result.position.lng;
                                    self.lat = result.position.lat;
                                    self.center = [self.lng, self.lat];
                                    self.loaded = true;
                                    self.$nextTick();
                                }
                            });
                        }
                    }
                }]
            }
        },
        beforeCreate () {
            
        },
        created () {
        },
        watch: {
            
        },
        mounted() {
            this.areaList = areaList
            let inte = setInterval(() => {
                if(sessionStorage.getItem('areaAdr')) {
                    clearInterval(inte)
                    let arr = sessionStorage.getItem('areaAdr').split('#')
                    this.selectArr = arr.map(item => {
                        let obj = {}
                        obj.name = item
                        return obj
                    })
                    this.autoSetText()
                }
            },1000)
        },
        methods: {
            selectArea(arr) {
                console.log(arr)
                this.selectArr = arr.map(item => {
                    let obj = {}
                    obj.name = item.name
                    obj.id = item.code
                    return obj
                })
                this.areaObj.popAreaShow = false
                this.autoSetText()
            },
            selectFw(type) {
                this.selectFwType = type
                this.autoSetText()
            },
            autoSetText() {
                if(!this.selectArr.length && this.selectFwType !== 0) {
                    xmview.showToast('请先选择发布区域')
                    return
                }
                let arr = this.selectArr
                console.log(arr)
                if(this.selectFwType === 0) {
                    this.areaObj.selectTxt = '全国'
                }else{
                    if(this.selectFwType === 1) {
                        this.areaObj.selectTxt = arr[0].name
                    }else if(this.selectFwType === 2) {
                        this.areaObj.selectTxt = arr[0].name + arr[1].name
                    }else if(this.selectFwType === 3) {
                        this.areaObj.selectTxt = arr[0].name + arr[1].name + arr[2].name
                    }
                    if(arr[0].id) { // 有id是选择的 没有id是开始定位的
                        let adrstr = toolsUtils.formartAreaName(arr[0].name,arr[1].name,arr[2].name)
                        this.$fetch(`${xmconfig.API_NC}/xfapi/index.php?act=area&op=getAreaInfo&province=${adrstr.split('#')[0]}&city=${adrstr.split('#')[1]}&county=${adrstr.split('#')[2]}`).then(res => {
                            if(res.datas.provinceData) {
                                sessionStorage.setItem('areap_id',res.datas.provinceData.area_id)
                                sessionStorage.setItem('areac_id',res.datas.cityData.area_id)
                                sessionStorage.setItem('areax_id',res.datas.countyData.area_id)
                            }else {
                                xmview.showToast('没有相应的位置信息')
                            }
                        })
                    }
                    
                }
                this.$emit('chooseAreaFn',this.selectFwType)
            }

        },
        
    }
</script>

